<template name="goodsDetail">
	<view class="card-wrap" @click="close">
		<view class="card" @click.stop>
		  <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		    <swiper-item v-for="item in 5" style="height: 340rpx;">
          <image src="" mode="aspectFill"></image>
		    </swiper-item>
		  </swiper>
      <view class="name ellipsis-2">{{info.name}}</view>
      <view class="price">¥{{info.price}}/天</view>
      <view class="description">{{info.description}}</view>
      <view class="start-time">
        <text>起始时间:</text>
        <picker mode="date" @change="bindDateChange">
          <text>{{startDate}}</text>
        </picker>
      </view>
      <view class="service-description">
        <view class="service-title">服务说明</view>
        <view class="descrip">预付<text>¥0.88元</text></view>
        <view class="descrip">以上费用为一天单次费用</view>
        <view class="descrip">涉及到其他费用请与服务人员结算</view>
      </view>
      <view class="bottom-bar">
        <view></view>
        <button @click="createServiceOrder">创建订单</button>
      </view>
		</view>
	</view>
</template>

<script>
	import {utils, broadcast} from '@/utils/index.js'
	import {Goods, Order} from '@/apis/index.js'
	export default {
    name: 'goodsDetail',
    props: {
      info: {
        type: Object,
        value: {
          id: 0,
          name: '',
          price: 0,
          deposit: 0,
          description: ''
        }
      }
    },
		data() {
			return {
				options: {},
				startDate: '选择开始时间',
				goodsInfo: {
					name: '无线入耳式音乐耳机',
					price: '20',
					deposit: '50',
					description: 'JBL T110BT无线蓝牙耳机跑步运动'
				},
			}
		},
		onLoad (options) {
		  this.options = options
		  options.id && getGoodsInfo.call(this)
		},
		methods: {
			bindDateChange (e) {
        this.startDate = e.target.value
			},
      close () {
        this.$emit('close')
      },
      addToCar () {
        let carGoods = uni.getStorageSync('carGoods') || []
        let shopId = null
        
        if (carGoods.length > 0) {
          shopId = carGoods[0].shopId
          if (this.info.shopId !== shopId ) {
            // 如果当前在的店铺与租赁车的店铺id不一致，则清空出租车
            carGoods = []
          }
        }
        
        let detail = carGoods.filter(item => {
          console.log(item)
          return item.id === this.info.id
        })
        
        if (!detail.length) {
          // 添加到出租车成功
          uni.showToast({
            title: '添加成功',
            icon: 'success',
            success: () => {
              this.$emit('close')
            }
          })
         carGoods.push(this.info)
        } else {
          uni.showToast({
            title: '此商品已经在出租车里了',
            icon: 'none'
          })
        }
        uni.setStorageSync('carGoods', carGoods)
        broadcast.fire('addToCar')
        
      },
      /**
       * 创建服务订单
       */
      createServiceOrder () {
        if (this.isLoading) return
        this.isLoading = true
        utils.wxLoading()
        const shopInfo = uni.getStorageSync('shopInfo')
        const userInfo = uni.getStorageSync('userInfo')
        Order.createOrder({
          data: {
            form: {
              shopId: shopInfo.id,
              goodsIds: this.info.id,
              userId: userInfo.id,
			  type: 2
            },
            pagination: {},
            query: {}
          }          
        }).then(res => {
          console.log('创建服务订单', res)
		  if (res.data.code == 200) {
			  utils.placeTo(`/pages/serviceOrderDetail/serviceOrderDetail?number=${res.data.body.orderNumber}`);
		  }
        }).catch(err => {
          utils.wxAlert('创建订单失败')
        }).finally(() => {
          uni.hideLoading()
        })
      }
		}
	}
	function getGoodsInfo () {
	  Goods.getGoodsDetail({
	    data: {
	      query: {
	        id: this.options.id
	      }
	    }
	  }).then(res => {
	    console.log('获取商品详情成功')
	    console.log(res.data)
	    if (res.data.code === 200) {
	      this.goodsInfo = res.data.list
	    } else {
	      utils.wxToastFail('获取数据失败')
	    }
	  }, err => {
	    console.error(err)
	  })
	}
</script>

<style lang="scss">
  .card-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    .card {
      width: 660rpx;
      height: 884rpx;
      position: relative;
      overflow-y: scroll;
      background-color: #FFFFFF;
      swiper image {
        background-color: #C0C0C0;
        width: 100%;
      }
      .name {
        font-size: 28rpx;
        box-sizing: border-box;
        padding: 20rpx 20rpx 10rpx;
      }
      .price {
        font-size: 28rpx;
        color: #ED1709;
        line-height: 1.5;
        box-sizing: border-box;
        padding: 0 20rpx;
      }
      .scope {
        font-size: 22rpx;
        color: #999999;
        box-sizing: border-box;
        padding-left: 30rpx;
      }
      .description {
        color: #555454;
        font-size: 24rpx;
        line-height: 1.5;
        box-sizing: border-box;
        padding: 20rpx;
      }
      .start-time {
        display: flex;
        box-sizing: border-box;
        padding: 0 20rpx;
        picker {
          box-sizing: border-box;
          font-size: 24rpx;
          padding-left: 20rpx;
        }
      }
      .service-description {
        box-sizing: border-box;
        font-size: 24rpx;
        padding: 20rpx 30rpx;
        padding-top: 40rpx;
        color: #999;
        .title {
          padding-bottom: 20rpx;
          padding-left: 20rpx;
          font-size: 28rpx;
          color: #333;
        }
        .descrip {
          line-height: 1.5;
          text {
            color: #F00;
          }
        }
      }
      .rent-round {
        display: flex;
        font-size: 28rpx;
        box-sizing: border-box;
        padding: 10rpx 20rpx;
        align-items: center;
        border-top: #EFEFEF 1rpx solid;
        text {
          padding-right: 20rpx;
        }
        picker {
          flex: 1;
          font-size: 24rpx;
          color: #999999;
          border: #DFDFDF 1rpx solid;
          padding: 10rpx;
          border-radius: 5rpx;
        }
        .line {
          color: #999999;
          padding: 0 20rpx;
          text-align: center;
        }
      }
      .distribute {
        display: flex;
        box-sizing: border-box;
        padding: 10rpx 20rpx;
        font-size: 28rpx;
        align-items:  center;
        border-top: #EFEFEF 1rpx solid;

        .name {
          padding-left: 0;
          flex-shrink: 0;
          flex: 1;
        }
        picker {
          flex: 1;
          padding-right: 20rpx;
          width: 250rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .btn-group {
          display: flex;
          flex-shrink: 0;
          button {
            height: 44rpx;
            line-height: 44rpx;
            font-size: 28rpx;
            padding: 0 10rpx;
            background-color: #FFFFFF;
            border-radius: 0;
            &.active {
              background-color: #E51C23;
              color: #FFFFFF;
            }
            &::after {
              border-radius: unset;
            }
          }
        }
      }
      .select-address {
        display: flex;
        box-sizing: border-box;
        padding: 20rpx;
        border-top: #EFEFEF 1rpx solid;
        border-bottom: #EFEFEF 1rpx solid;
        align-items: center;
        .main {
          flex: 1;
          box-sizing: border-box;
          padding-right: 20rpx;
          .title {
            font-size: 28rpx;
          }
          .address {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
      .bottom-bar {
        height: 96rpx;
        display: flex;
        box-sizing: border-box;
        position: fixed;
        background-color: #FFF;
        bottom: 0;
        align-items: center;
        left: 0;
        right: 0;
        border-top: #F1F1F1 1rpx solid;
        font-size: 28rpx;
        padding: 0 20rpx;
        view {
          line-height: 96rpx;
          flex: 1;
        }
        button {
          background-color: #DB3131;
          color: #FFFFFF;
          font-size: 28rpx;
          height: 60rpx;
          line-height: 60rpx;
        }
      }
    }
  }
</style>
